<script setup>
import { reactive, onMounted } from "vue";
import { getTUMa, getShouMa, getZheCe } from "@/http/api.js";
import { useRouter } from "vue-router";

const router = useRouter();
const data = reactive({
  img: {},
  mobile: "", // 手机号码
  captcha: "", // 图片验证码
  sms_code: "", // 手机验证码
});

onMounted(() => {
  TuMa(); //// 图片验证码
});
// 图片验证码
const TuMa = async () => {
  const res = await getTUMa();
  data.img = res.url; //  图片验证码数据
};
// 点击调用
const img = () => {
  TuMa(); //// 图片验证
};

// 获取手机号验证码
const goYZM = async () => {
  if (data.mobile !== "") {
    let obj = {
      mobile: data.mobile,
      sms_type: "login",
    };
    const res = await getShouMa(obj);
  } else {
    alert("手机号不能为空");
    return false;
  }

  // console.log(res);
};
// 注册 登录
const zuce = async () => {
  let obj = {
    sms_code: data.sms_code, // 手机验证码
    captcha: data.captcha, // 图片验证码
    mobile: data.mobile, // 手机号
    user_pass: "000000", // 用户初始密码
    device_type: "2",
  };
  // 获取注册的数据
  const res = await getZheCe(obj);
  if (res) {
    const { avatar, remember_token: token, user_nickname } = res;
    localStorage.setItem("avatar", avatar); // 存本地的图像
    localStorage.setItem("token", token); // 存本地的token
    localStorage.setItem("user_nickname", user_nickname); // 存本地的名字
    console.log(res);
    router.push(`/smima?mobile=${data.mobile}&sms_code=${data.sms_code}`);
  } else {
    return false;
  }
};
</script>
<template>
  <div class="login">
    <van-icon name="arrow-left" @click="$router.back()" />
    <div class="imgBox">
      <img src="https://wap.lexuemiao.com/img/logo@2x.a4702f31.png" alt="" />
    </div>
    <van-cell-group inset>
      <van-icon name="phone-o" />
      <van-field v-model="data.mobile" placeholder="请输入手机号" />
      <span class="ma" @click="goYZM">获取验证码</span>
    </van-cell-group>
    <van-cell-group inset>
      <van-icon name="shield-o" />
      <van-field v-model="data.sms_code" placeholder="请输入手机验证码" />
    </van-cell-group>
    <van-cell-group inset>
      <van-icon name="shield-o" />
      <van-field v-model="data.captcha" placeholder="请输入图片验证码" />
      <img :src="data.img.img" alt="" @click="img" />
    </van-cell-group>
    <!-- 登录 -->
    <p class="goLogin">
      <button @click="zuce">登录</button>
    </p>
    <div class="mi">
      <p class="p1">未注册的手机号码将自动注册</p>
      <p class="p1">
        <span @click="$router.back()">密码登录</span>
      </p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.login {
  overflow: hidden;
  .van-icon {
    margin: 20px 10px;
    width: 60px;
    text-align: center;
  }
  .imgBox {
    width: 100%;
    // background: pink;
    padding: 150px 50px;
    text-align: center;
    img {
      width: 60%;
      margin-left: -100px;
    }
  }
  .van-cell-group {
    display: flex;
    .ma {
      width: 280px;
      text-align: center;
      font-size: 24px;
      margin-right: 30px;
      height: 0.8rem;
      line-height: 0.8rem;
      background: #f15a24;
      border-radius: 0.04rem;
      color: #fff;
    }
    .van-icon {
      color: orange;
    }
    img {
      width: 20%;
      height: 60px;
      margin-top: 20px;
    }
  }
  .van-field {
    // background: blue;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.171);
  }
  :deep(.van-cell__title) {
    color: red;
    margin: 0;
  }
  .goLogin {
    text-align: center;
    button {
      width: 80%;
      height: 88px;
      background: #f15a24;
      border-radius: 0.10667rem;
      border: 0;
      margin-top: 0.6rem;
      font-size: 0.45333rem;
      font-weight: 400;
      color: #fff;
      outline: none;
      line-height: 1.2rem;
    }
  }
  .mi {
    display: flex;
    justify-content: space-between;
    padding: 0 100px;
    margin-top: -40px;
    font-size: 20px;
    .p1 {
      color: #ccc;
    }
  }
}
</style>
